<template>
  <div ref="mermaidChart" class="architecture-diagram"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import mermaid from 'mermaid'

const mermaidChart = ref(null)

onMounted(() => {
  mermaid.initialize({ 
    startOnLoad: true,
    theme: 'default',
    securityLevel: 'loose'
  })
  
  const diagram = `
graph TB
    subgraph "前端架构 (Vue 3 + Element Plus)"
        A[用户界面层]
        B[组件层]
        C[状态管理层]
        D[路由层]
        E[API服务层]
    end

    subgraph "核心业务模块"
        F[景点展示模块]
        G[预约管理模块]
        H[支付处理模块]
        I[用户管理模块]
        J[订单管理模块]
    end

    subgraph "数据流"
        K[用户操作]
        L[状态更新]
        M[API调用]
        N[数据持久化]
    end

    subgraph "后端服务 (模拟/真实)"
        O[认证服务]
        P[支付网关]
        Q[数据API]
        R[文件服务]
    end

    A --> B
    B --> C
    C --> D
    D --> E
    E --> O
    E --> P
    E --> Q
    E --> R

    F --> G
    G --> H
    H --> I
    I --> J

    K --> L
    L --> M
    M --> N

    style A fill:#e1f5fe
    style B fill:#f3e5f5
    style C fill:#fff3e0
    style D fill:#e8f5e8
    style E fill:#ffebee
    
    style F fill:#bbdefb
    style G fill:#c8e6c9
    style H fill:#fff9c4
    style I fill:#d1c4e9
    style J fill:#ffccbc
  `
  
  mermaid.render('architecture-diagram', diagram).then(result => {
    mermaidChart.value.innerHTML = result.svg
  }).catch(err => {
    console.error('Mermaid渲染失败:', err)
  })
})
</script>

<style scoped>
.architecture-diagram {
  width: 100%;
  height: 600px;
  overflow: auto;
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.architecture-diagram svg {
  max-width: 100%;
  height: auto;
}
</style>